<!doctype html>
<html lang=zh>
<head>
    <meta charset=UTF-8>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1" name=viewport>
    <style>body, html {
        background: #f2f2f2;
        font-size: 25vw;
        font-family: 'Microsoft YaHei UI', 'Microsoft YaHei', sans-serif;
        margin: 0;
        padding: 0
    }

    * {
        outline: 0;
        -webkit-tap-highlight-color: transparent
    }

    #content {
        visibility: visible
    }

    #content:target {
        visibility: visible
    }

    #content div.forms {
        padding: .1rem 0 .7rem
    }

    .forms__departure {
        padding: 10px;
        background: #fff;
        font-size: 12px;
        display: flex;
        font-weight: 700;
        justify-content: space-between;
        align-items: center;
        line-height: .2rem;
        margin-bottom: .1rem
    }

    .forms__departure__left {
        display: flex;
        align-items: center
    }

    .forms__departure__button {
        width: 9px;
        height: 5px
    }

    .forms__top {
        padding: 10px;
        background: #fff;
        font-size: 12px;
        display: flex;
        font-weight: 700;
        align-items: center;
        line-height: .2rem;
        margin-bottom: .1rem
    }

    .forms__sheet-icon {
        width: 16px;
        height: 16px
    }

    .forms__title {
        display: block;
        padding: 10px 15px;
        font-size: 14px;
        line-height: 22px;
        color: #878787
    }

    .forms__wrapper {
        background: #f4f7fa
    }

    .forms__content {
        overflow: hidden;
        display: block;
        padding: 13px 0;
        line-height: .2rem;
        background: #fff;
        font-size: 14px;
        text-align: center;
        color: #606266
    }

    .forms__dynamic-bar {
        margin-top: 12px;
        padding: 13px 15px
    }

    .forms__input-field {
        width: 100%;
        color: #606266;
        text-align: center;
        border: none;
        font-size: 14px;
        height: 15px
    }

    .forms__passport {
        width: 150px;
        height: 150px
    }
    .forms_head-pic{
        width: 110px;
        height: 110px
    }

    .dynamic-bar__img {
        width: 100%;
        height: 100%
    }

    #forms__allow-in-or-out__content {
        font-size: 18px;
        font-weight: 700;
        color: green;
        user-select: none;
        cursor: text
    }

    .footer-buttons__wrapper {
        position: fixed;
        height: .4rem;
        width: 100%;
        bottom: 0;
        background: #fff;
        display: flex;
        align-items: center;
        padding: .1rem .08rem
    }

    .footer-buttons__button {
        width: 23%;
        height: .4rem;
        font-size: .15rem;
        text-align: center;
        line-height: .4rem;
        border: .01rem solid #4285f4;
        color: #4285f4;
        border-radius: .2rem;
        cursor: pointer;
        user-select: none;
        background: #fff
    }

    .footer-buttons__button:active {
        background: #c3c3c3
    }

    .screen-overlay {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0
    }

    #hover-menu__content {
        background: rgba(121, 121, 121, .5)
    }

    .hover-menu {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%
    }

    .hover-menu__item {
        font-size: .14rem;
        text-align: center;
        height: 38px;
        line-height: 38px;
        margin-bottom: 3px;
        background: #fff;
        color: #4285f4;
        user-select: none
    }

    #preview-form__content {
        background: rgba(0, 0, 0, .8196078431)
    }

    #preview-form__btn-close {
        position: fixed;
        top: .19rem;
        left: .19rem;
        width: .3rem;
        height: .3rem;
        cursor: pointer
    }

    #preview-form__iframe {
        position: fixed;
        top: .7rem;
        left: .05rem;
        width: calc(200% - .2rem);
        height: 10rem;
        transform: scale(.5);
        transform-origin: top left;
        background: #fff;
        border: none
    }

    .preview-form__footer {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: .6rem;
        line-height: .6rem;
        font-size: .18rem;
        color: #fff;
        text-align: center;
        background: #000
    }

    #agent-dialog__content {
        background-color: rgba(0, 0, 0, 0);
        transition: background-color .3s linear
    }

    #agent-dialog__content.agent-dialog_show {
        background-color: rgba(0, 0, 0, .5)
    }

    .agent-dialog__dialog {
        margin: 15vh auto 50px;
        width: 300px;
        border-radius: 2px;
        background: #fff;
        position: relative;
        transform: translate(0, -20px);
        opacity: 0;
        transition: transform .3s, opacity .3s
    }

    .agent-dialog_show .agent-dialog__dialog {
        transform: translate(0, 0);
        opacity: 1
    }

    #agent-dialog__close-btn {
        position: absolute;
        top: 22px;
        right: 22px;
        width: 12px;
        height: 12px;
        cursor: pointer
    }

    .agent-dialog__title {
        font-size: 18px;
        color: #303133;
        padding: 20px 20px 10px;
        text-align: center
    }

    .agent-dialog__body {
        padding: 25px 25px 30px
    }

    .agent-dialog__input-container {
        font-size: 14px;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        color: #c0c4cc;
        display: flex;
        align-items: center
    }

    .agent-dialog__icon {
        height: 16px;
        width: 16px;
        padding: 12px 6px 12px 10px
    }

    .agent-dialog__input-field {
        font-size: 14px;
        color: #606266;
        border: none
    }

    .agent-dialog__input-field::placeholder {
        color: #c0c2cc
    }

    .agent-dialog__footer {
        padding: 10px 68px 20px;
        font-size: 14px;
        display: flex;
        justify-content: space-between
    }

    .agent-dialog__button {
        border: 1px solid #dcdfe6;
        background: #fff;
        padding: 10px 20px;
        border-radius: 4px;
        color: #606266;
        cursor: pointer;
        font-size: 14px
    }

    .agent-dialog__button-primary {
        border-color: #4285f4;
        background: #4285f4;
        color: #fff;
        line-height: 14px;
        transition: border-color .3s, background-color .3s, color .3s
    }

    .agent-dialog__button-primary:hover {
        border-color: #dcdfe6;
        background: #fff;
        color: #606266
    }</style>
    <title>请假外出、返校权限查询通行码</title></head>
<body>
<div id=content>
    <div class=forms>
        <div class=forms__departure id=forms__departure>
            <div class=forms__departure__left><img class=forms__sheet-icon data-load-image=process-icon>
                <p style="margin:0 0 0 5px">当前部门：<span data-load-storage-key=school>电子工程学院</span></p></div>
            <img class=forms__departure__button data-load-image=down-button></div>
        <div class=forms__top><img class=forms__sheet-icon data-load-image=sheet-icon> <span style=margin-left:5px>请假外出、返校权限查询</span>
        </div>
        <div class=forms__wrapper>
            <div class=forms__title>姓名</div>
            <label class=forms__content><input autocomplete=off class=forms__input-field data-input-storage-key=name
                                               id=forms__input-field__name value=小明></label>
            <div class=forms__title>照片</div>
            <div class=forms__content><img  id=myimg class=forms_head-pic data-load-image=head-pic></div>
            <div class="forms__content forms__dynamic-bar">
                <div><img class=dynamic-bar__img data-load-image=dynamic-bar src=image></div>
            </div>
            <div class=forms__title>状态码</div>
            <div class=forms__content><img class=forms__passport data-load-image=my-passport></div>
            <div class=forms__title style=font-size:18px>状态</div>
            <div class=forms__content id=forms__allow-in-or-out__switch><span
                    id=forms__allow-in-or-out__content>允许入校</span></div>
            <div class=forms__title>学工号</div>
            <label class=forms__content for=forms__input-field__id><input autocomplete=off class=forms__input-field
                                                                          data-input-storage-key=id
                                                                          id=forms__input-field__id
value=2020110248
                                                                          >  </label>
            <div class=forms__title>出入校时间</div>
            <div class=forms__content id=current-time><input autocomplete=off class=forms__input-field
                                                                              data-input-storage-key=school
                                                                              id=forms__input-field__school
                                                                              value=2020-09-14 00:00:00></div>

            <div class=forms__title>学院</div>
            <label class=forms__content for=forms__input-field__school><input autocomplete=off class=forms__input-field
                                                                              data-input-storage-key=school
                                                                              id=forms__input-field__school
                                                                              value=电子工程学院></label>


        </div>
    </div>
    <div class=footer-buttons__wrapper>
        <button class=footer-buttons__button id=footer-buttons__btn-more>更多</button>
    </div>
</div>
<div class=screen-overlay id=hover-menu__content>
    <div class=hover-menu id=hover-menu__bottom-container>
        <div class=hover-menu__item id=hover-menu__btn-agent>代发起</div>
        <div class=hover-menu__item id=hover-menu__btn-preview>预览表单</div>
        <div class=hover-menu__item id=hover-menu__btn-cancel>取消</div>
    </div>
</div>
<div class=screen-overlay id=preview-form__content><img data-load-image=close-btn id=preview-form__btn-close>
    <iframe id=preview-form__iframe></iframe>
    <div class=preview-form__footer>1 / 1</div>
</div>
<div class=screen-overlay id=agent-dialog__content>
    <div class=agent-dialog__dialog><img data-load-image=close-icon id=agent-dialog__close-btn>
        <div class=agent-dialog__title>添加人员</div>
        <div class=agent-dialog__body>
            <div class=agent-dialog__input-container><img class=agent-dialog__icon data-load-image=search-icon> <input
                    id=inpp class=agent-dialog__input-field placeholder=输入base64编码 value="" ></div>
        </div>
        <div class=agent-dialog__footer>
            <button class=agent-dialog__button id=agent-dialog__cancel onClick="change()">取 消</button>
            <button class="agent-dialog__button agent-dialog__button-primary" id=agent-dialog__confirm onClick="change()">确 定</button>
        </div>
	
    </div>
</div>
<script defer>!function () {
    "use strict";
var image="";
    const A = {
        "./close-btn.svg": Object.freeze({
            __proto__: null,
            [Symbol.toStringTag]: "Module",
            default: ""
        }),
        "./my-passport.svg": Object.freeze({
            __proto__: null,
            [Symbol.toStringTag]: "Module",
            default: ""
        }),
        "./process-icon.svg": Object.freeze({
            __proto__: null,
            [Symbol.toStringTag]: "Module",
            default: "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20fill%3D%22%234285f4%22%20d%3D%22M952%20647h-92v-84c0-39-31-70-70-70H545V359h92c35%200%2063-28%2063-63V88c0-35-28-63-63-63H388c-35%200-63%2028-63%2063v208c0%2035%2028%2063%2063%2063h92v134H235c-38%200-70%2031-70%2069v94H73c-35%200-63%2028-63%2063v208c0%2035%2028%2063%2063%2063h250c34%200%2062-28%2062-63V719c0-35-28-63-62-63h-93v-94c0-2%202-4%205-4h555c2%200%204%202%204%204v85h-92c-34%200-63%2028-63%2062v209c0%2034%2029%2062%2063%2062h250c34%200%2063-28%2063-62V709c0-34-29-62-63-62zM390%2090h245v204H390V90zm-70%20835H76V721h244v204zm630-10H705V712h244v203z%22%2F%3E%3C%2Fsvg%3E"
        }),
        "./search-icon.svg": Object.freeze({
            __proto__: null,
            [Symbol.toStringTag]: "Module",
            default: "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cg%20fill%3D%22%23C0C4CC%22%3E%3Cpath%20d%3D%22M490%20162a332%20332%200%201%201%200%20665%20332%20332%200%200%201%200-665m0-90a422%20422%200%201%200%200%20844%20422%20422%200%200%200%200-844z%22%2F%3E%3Cpath%20d%3D%22M923%20916c-12%200-23-4-32-13L770%20782a45%2045%200%201%201%2064-64l121%20121a45%2045%200%200%201-32%2077z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"
        }),
        "./sheet-icon.svg": Object.freeze({
            __proto__: null,
            [Symbol.toStringTag]: "Module",
            default: "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20fill%3D%22%234285f4%22%20d%3D%22M288%20512h256c17.92%200%2032-14.08%2032-32s-14.08-32-32-32H288c-17.92%200-32%2014.08-32%2032s14.08%2032%2032%2032zM768%2064H192c-70.4%200-128%2057.6-128%20128v576c0%2070.4%2057.6%20128%20128%20128h576c70.4%200%20128-57.6%20128-128V192c0-70.4-57.6-128-128-128zm64%20704c0%2035.2-28.8%2064-64%2064H192c-35.2%200-64-28.8-64-64V192c0-35.2%2028.8-64%2064-64h576c35.2%200%2064%2028.8%2064%2064v576zM672%20256H288c-17.92%200-32%2014.08-32%2032s14.08%2032%2032%2032h384c17.92%200%2032-14.08%2032-32s-14.08-32-32-32zm-64%20384H288c-17.92%200-32%2014.08-32%2032s14.08%2032%2032%2032h320c17.92%200%2032-14.08%2032-32s-14.08-32-32-32z%22%2F%3E%3C%2Fsvg%3E"
        }),
    };
   
    function t(t, s) {
        const S = t.replace('"', '\\"');
        document.querySelectorAll(`[data-load-image="${S}"]`).forEach(S => {
            const e = `${t}.${s}`;
            if (!A["./" + e]) throw new Error(`图片 ${e} 不存在。`);
            S.src = A["./" + e].default
        })
    }

    !function () {
        const A = new URL(window.location.href);
        try {
            document.querySelector(A.hash) && (document.title = "请假外出、返校权限查询通行码")
        } catch {
        }
    }(), function () {
        function A() {
            let A = document.documentElement.clientWidth;
            A > 640 ? A = 480 : A < 320 && (A = 320), document.documentElement.style.fontSize = 100 * A / 375 + "px"
        }

        window.addEventListener("resize", A), A()
    }(), document.querySelectorAll(".top__onetop").forEach(A => {
        A.addEventListener("click", () => {
            A.classList.add("top__onetop_activated")
        })
    }), function () {
        const A = document.getElementById("hover-menu__content"), t = document.getElementById("preview-form__content"),
            s = document.getElementById("agent-dialog__content");
        A.addEventListener("click", () => {
            A.style.display = "none"
        }), document.getElementById("hover-menu__bottom-container").addEventListener("click", A => {
            A.stopPropagation()
        }), document.getElementById("footer-buttons__btn-more").addEventListener("click", () => {
            A.style.display = "block"
        }), document.getElementById("hover-menu__btn-agent").addEventListener("click", () => {
            A.style.display = "none", s.style.display = "block", setTimeout(() => {
                s.classList.add("agent-dialog_show")
            }, 0)
        }), document.getElementById("hover-menu__btn-cancel").addEventListener("click", () => {
            A.style.display = "none"
        }), document.getElementById("hover-menu__btn-preview").addEventListener("click", () => {
            A.style.display = "none", t.style.display = "block", document.getElementById("preview-form__iframe").src = "./preview-form.html#table-content"
        }), document.getElementById("preview-form__btn-close").addEventListener("click", () => {
            t.style.display = "none"
        });
        for (const A of ["agent-dialog__cancel", "agent-dialog__confirm", "agent-dialog__close-btn"]) document.getElementById(A).addEventListener("click", () => {
            s.classList.remove("agent-dialog_show"), setTimeout(() => {
                s.style.display = "none"
            }, 300)
        })
    }(), document.querySelectorAll("[data-input-storage-key]").forEach(A => {
        const t = A, s = localStorage["passport__storable-input__" + t.dataset.inputStorageKey];
        s && (t.value = s);
        const S = t.dataset.inputStorageKey.replace('"', '\\"'),
            e = document.querySelectorAll(`[data-load-storage-key="${S}"]`);
        e.forEach(A => {
            A.innerText = t.value
        }), t.addEventListener("input", () => {
            localStorage["passport__storable-input__" + t.dataset.inputStorageKey] = t.value, e.forEach(A => {
                A.innerText = t.value
            })
        })
    }), document.getElementById("current-time").innerText = function () {
        const A = new Date;
        A.setUTCHours(A.getUTCHours() + 8);
        const t = A.toISOString();
        return `${t.substr(0, 10)} ${t.substr(11, 8)}`
    }(), function () {
        const A = document.getElementById("forms__allow-in-or-out__switch"),
            t = document.getElementById("forms__allow-in-or-out__content");
        A.addEventListener("click", () => {
            "允许出校" === t.innerHTML ? t.innerHTML = "允许入校" : t.innerHTML = "允许出校"
        })
    }(), t("close-btn", "svg"), t("close-icon", "svg"), t("my-passport", "svg"), t("sheet-icon", "svg"), t("search-icon", "svg"), t("dynamic-bar", "gif"), t("process-icon", "svg"), t("down-button", "svg"),t("head-pic", "jpg")
}()
 function change(){
        var inp=document.getElementById("inpp").value;
        var sr=document.getElementById("myimg");
        sr.src=inp;
	
    }
</script>
</body>
</html>